<template>
  <crumbs>
    <el-button @click="clearHandle">清空</el-button>
  </crumbs>
  <div class="wrapper">
    <report-table
      class="reportTable"
      ref="tableCommon"
      :real-table-columns="realTableColumns"
      :realTableData_parent="datas.tableData"
      :realTotal_parent="tableJson.length"
      :pageSize="pageSize.vlaue"
      @pagination-change="paginationChange"
      @handleSelectionChange="selectionChange"
    >
      <template #msg="{ row }">
        {{ '普通用户：' + row.msg }}
      </template>
    </report-table>
  </div>
</template>

<script setup lang="ts">
import reportTable from '@/components/reportTable/report-table.vue'
import tableJson from './table.json'
import { ref, reactive, nextTick, getCurrentInstance, ComponentInternalInstance } from 'vue'

let pageSize: any = ref(10),
  datas = reactive({
    tableData: tableJson.slice(0, pageSize.value)
  }),
  historySelect = reactive([]),
  currPageSelect = reactive([]),
  { proxy } = getCurrentInstance() as ComponentInternalInstance

const realTableColumns = [
  {
    type: 'selection',
    width: '100'
  },
  {
    type: 'index',
    label: '序号',
    width: '100'
  },
  {
    prop: 'test',
    label: '测试',
    width: '180'
  },
  {
    prop: 'date',
    label: '日期'
  },
  {
    prop: 'people',
    label: '操作人'
  },
  {
    prop: 'root',
    label: '权限',
    type: 'formatter',
    formatterType: (row: { root: boolean }) => {
      if (!row.root) {
        return '无'
      } else {
        return '有'
      }
    }
  },
  {
    prop: 'msg',
    label: '测试信息',
    type: 'slot'
  }
]

// methods

const paginationChange = (v: { pageSize: number; pageNum: number }) => {
  datas.tableData = tableJson.slice((v.pageNum - 1) * v.pageSize, v.pageNum * v.pageSize)
  historySelect = [...historySelect, ...currPageSelect]
  initCheckBoxStatus()
}

const selectionChange = function (v: any) {
  historySelect = historySelect.filter(
    (x: any) => !v.some((y: any) => y.regionCode === x.regionCode)
  )
  currPageSelect = v
}
const clearHandle = () => {
  let tableCommon = proxy?.$refs?.tableCommon as any
  historySelect = []
  tableCommon?.$refs?.tableDom.clearSelection()
}
// 分页多选处理
const initCheckBoxStatus = function () {
  let arr: any = []
  datas.tableData.forEach((x: any) => {
    if (historySelect.map((y: any) => y.regionCode).includes(x.regionCode)) {
      arr.push(x)
    }
  })

  nextTick(() => {
    arr.forEach((x: any) => {
      let tableCommon = proxy?.$refs?.tableCommon as any
      tableCommon?.$refs?.tableDom?.toggleRowSelection(x, true)
    })
  })
}
</script>

<style lang="less" scoped>
.wrapper {
  display: flex;
  flex-direction: column;
  .reportTable {
    flex: 1;
    box-sizing: border-box;
  }
}
</style>
